<template>
  <div class="container-widget columns-widget" ref="container">
    <div class="container-widget-content">
      <div class="row" :class="'gutter-' + item.gutter">
        <div v-for="(column, index) in item.columns" :class="'col-' + column.span" :key="index">
          <container-widget class="kw-component" :item="column" :is-container="true"></container-widget>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { containerMixin } from '../mixins/widget'
  export default {
    name: 'columns-widget',
    mixins: [containerMixin],
    props: {
      item: {
        default() {
          return {
            gutter: 5,
            components: [],
            columns: []
          }
        }
      }
    }
  }
</script>

<style lang="less">
  .columns-widget {
    background-color: #fff;
    border: 1px solid #c8c8ca;
  }
</style>